<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>focus 焦点图</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/common.js" ></script>
<style>
	.focus-wrap{
		width:720px;
		height: 404px;
		overflow: hidden;
		position: relative;
	}
	.focus-wrap ul{width:100%; height: 100%; position:absolute; top:0; left: 0; overflow: hidden;}
	.focus-wrap ul li{width:720px; height: 404px; position: absolute; top:0; left:0; display: none;}
	.prenbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; left:0; background: url(images/focus/prev.png) no-repeat; z-index: 9999;}
	.nextbtn{width:50px; height: 45px; display: block; position: absolute; top:175px; cursor: pointer; right:0; background: url(images/focus/next.png) no-repeat; z-index: 9999;}
	.focus-point{width:100%; position: absolute; height: 16px; bottom:16px; text-align: center; z-index: 9999;}
	.focus-point i{width:16px; height: 16px; background: #fff; display: inline-block; margin-right: 8px; text-indent: -999px; border-radius: 50%; cursor: pointer; opacity: .3;}
	.focus-point i.curr{background: #119DE8; opacity: 1;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">focus 焦点图</h2>
	<div class="wrap-main">
		<div class="focus-wrap" id="focus">
			<ul>
				<li><a href="#"><img src="images/focus/b1.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b2.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b3.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b4.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b5.jpg"></a></li>
				<li><a href="#"><img src="images/focus/b6.jpg"></a></li>
			</ul>
			<span class="prenbtn"></span>
			<span class="nextbtn"></span>
		</div>
	</div>
</div>
<script>
	
	
	window.onload = function ()
	{
		
		index=0;
		pindex=0;
		nindex=0;
		var oDiv = document.getElementById("focus");
		var oPreBtn = miaov.common.getByClass("focus","prenbtn")[0];
		var oNextBtn = miaov.common.getByClass("focus","nextbtn")[0];
		var oUl = oDiv.getElementsByTagName("ul")[0];
		var oLi = oUl.getElementsByTagName("li");
		var timer = null;
		
		//焦点 demo添加
		var oPoint = document.createElement("div");
		oPoint.className = "focus-point";
		var oIdemo = '';
		for(var i=0; i< oLi.length; i++)
		{
			oIdemo += '<i>' + i + '</i>';
		}
		oDiv.appendChild(oPoint);
		oPoint.innerHTML = oIdemo;
		oPoint.getElementsByTagName("i")[0].className = "curr";
		
		var oPointDiv = miaov.common.getByClass("focus","focus-point");
		var oPoint = oPointDiv[0].getElementsByTagName("i");
		
		
		autoPlay();
		timer = setInterval(function(){
			autoPlay();
		},2000)
		
//		oDiv.onmouseover = function()
//		{
//			clearInterval(timer);
//		}
//		
//		oDiv.onmouseout = function()
//		{
//			timer = setInterval(autoPlay(),2000);
//		}
		
		
		/*圆点 事件*/
		for (var i = 0; i < oPoint.length; i++) 
		{  
			oPoint[i].onclick = function () 
			{
				clearInterval(timer);
				flag = this.innerText;
				console.log(flag);
				changePic(flag);
			} 
		};
		
		
		oPreBtn.onmouseover = oNextBtn.onmouseover = oPointDiv[0].onmouseover = function ()
		{
			clearInterval(timer);
		}
		
		
		
		
		function changePic(index)
		{
			for (var i = 0; i < oLi.length; ++i) 
			{  
				oLi[i].className = "";
				oLi[i].style.display = "none";
				oPoint[i].className = "";  
			}
			oLi[index].className = "curr";
			oLi[index].style.display = "block";
			oPoint[index].className = "curr";  
		}
		
		function autoPlay()
		{
			if (index >= oLi.length)
			{
				index = 0;
			}
			index += 1;
			console.log(index);
			changePic(index-1);
			
		}
	}
	
	
</script>
</body>
</html>
